<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	{% include 'public/static_top.html' %}
	<style type="text/css">
		.book_list_1 {
			margin-top: 50px;
		}
		.book-check {
			margin-right: 10px;
		}
		#check_num {
			color: #f80707;
			font-weight: bold;
			margin: 0 1px;
		}
	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a href="{{ url('user:index') }}" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">{% if oper == 'borrow' %} 借书 {% elif oper == 'return' %} 还书 {% endif %}</h1>
	</header>

    {% if oper == 'borrow' %}
{#        借书#}
    <div class="book_list_1">
	<ul class="mui-table-view">
        {% for book in booklist %}
		<li class="mui-table-view-cell mui-media">
			<a href="javascript:;">
				<img class="mui-media-object mui-pull-left" src="{{ book.book.cover.url }}">
				<div class="mui-media-body">
					<span class="book_name">{{ book.book.name }}</span>
					<p class="mui-ellipsis">{{ book.book.author }} </p>
					<p class='mui-ellipsis'> 剩余 {{ book.book.remain_count }} 本</p>
				</div>
			</a>
		</li>
        {% endfor %}
		</ul>
	</div>
	
	<p class="mui-text-center">共{{ book_count }}本</p>
	<div class="mui-content-padded">
		<button class="mui-btn mui-btn-block mui-btn-primary borrow" data-loading-text="出库中...">借出</button>
	</div>

    {% elif oper == 'return' %}
	<!--还书-->
	<div class="book_list_1">
	<ul class="mui-table-view">
        {% for book in booklist %}
		<li class="mui-table-view-cell mui-media">
			<a href="javascript:;">
				<input type="checkbox" name="return_book" class="book-check mui-pull-left" value="{{ book.book.id }}" onclick="check_book(this);" />
				<img class="mui-media-object mui-pull-left" src="{{ book.book.cover.url }}">
				<div class="mui-media-body">
					<span class="book_name">{{ book.book.name }}</span>
                    {% if book.status=='1' %}
					<p class='mui-ellipsis'>借书时间：{{ book.borrow_time }} <span class="borrowed red">未还</span> </p>
                    {% endif %}
                </div>
            </a>
        </li>
        {% endfor %}
	</ul>
	</div>
	
	<p class="mui-text-center">选择<span id="check_num">0</span>本，共{{ book_count }}本</p>
	<div class="mui-content-padded">
		<button class="mui-btn mui-btn-block mui-btn-primary return" data-loading-text="入库中...">入库</button>
	</div>
    {% endif %}
	
	
	{% include 'public/static_bottom.html' %}
	<script type="text/javascript">
		mui.init();
        {% if oper == 'borrow' %}
		document.querySelector("button.borrow").addEventListener('click', function() {
			books_elem = document.querySelectorAll("span.book_name");
			books_name = [];
			for (index=0; index<books_elem.length; index++) {
				books_name.push(books_elem[index].innerText);
			}
			mui.confirm(books_name.join('\n'), '借出', ['确定', '取消'], function(e) {
				if (e.index == 0) {
					mui("button.borrow").button("loading");
					mui.ajax('{{ url('user:borrow') }}', {
						data: {
							user_id: {{ userinfo.id }},
							time: new Date().getTime(),
                            csrfmiddlewaretoken: '{{ csrf_token }}',
						},
						dataType: 'json',
						type: 'post',
						success: function(res) {
							if (res.status==1) {
								mui.toast('借出成功');
							} else if (res.status == 2) {
								mui.toast('此用户借书单图书，请重新查看借书单')
							} else {
								mui.alert('服务器繁忙，请稍后重试');
							}
							mui("button.borrow").button("reset");
                            mui.alert('成功出借', '借书', '好', function () {
                                window.history.back(-1);     // 返回首页
                            });
						},
						error: function(result) {
							mui.toast('网络请求失败，请联系网络管理员');
                            mui("button.borrow").button("reset");
						}
					});
				}
			} )
		})

        {% elif oper == 'return' %}
        // 调整多选框高度
        check_books = document.getElementsByName("return_book");
        for (i=0; i<check_books.length; i++) {
            check_books[i].style.marginTop = check_books[i].nextElementSibling.height * 0.45 + 'px';
        }
        // 实时计算选中书的个数
		var check_num = 0;
        function check_book(elem){
        elem.checked? check_num++: check_num--;
        document.getElementById("check_num").innerText = check_num;
        }
		document.querySelector("button.return").addEventListener('click', function() {
//			计算book_id
            var obj = document.getElementsByName("return_book");
            books_elem = document.querySelectorAll("span.book_name");
			books_name = [];
            check_val = [];
            for(k in obj){
                if(obj[k].checked) {
                    check_val.push(obj[k].value);
					books_name.push(books_elem[k].innerText);
                }
            }
            if (check_val.length==0) {
            	mui.toast('请至少选择一本图书');
            	return false;
            }
            
			mui.confirm(books_name.join('\n'), '入库', ['确定', '取消'], function(e) {
				if (e.index == 0) {
					mui("button.return").button("loading");
					mui.ajax('{{ url('user:return_book') }}', {
						data: {
							user_id: {{ userinfo.id }},
							books_id: check_val.join(','),
							time: new Date().getTime(),
                            csrfmiddlewaretoken: '{{ csrf_token }}',
						},
						dataType: 'json',
						type: 'post',
						success: function(res) {
							if (res.status==1) {
								mui.toast('入库成功');
							} else {
								mui.alert('服务器繁忙，请稍后重试');
							}
							mui("button.return").button("reset");
                            mui.alert('已入库', '还书', '好', function () {
                                window.history.back(-1);     // 返回首页
                            });
						},
						error: function(result) {
							mui.toast('网络请求失败，请联系网络管理员');
                            mui("button.return").button("reset");
						}
					});
				}
			})
			
		})
        {% endif %}
	</script>
</body>

</html>